<template>
  <div class="dashboard">
    <TopNavbar />

    <!-- 侧边栏 -->
    <Sidebar />

    <!-- 社团管理内容区域 -->
    <div class="club-management-content">
      <!-- 搜索和新增按钮 -->
      <div class="search-and-actions">
        <el-input
            v-model="searchQuery"
            placeholder="请输入社团名称"
            class="search-input"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>

      <!-- 社团管理表格 -->
      <el-card class="club-management-card">
        <el-table
            :data="filteredClubs"
            style="width: 100%"
        >
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="clubName" label="社团名称" width="180"></el-table-column>
          <el-table-column prop="leaderName" label="社团一把手"></el-table-column>
          <el-table-column prop="currentMembers" label="社团人数"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="handleViewClub(row)">查看详情</el-button>
              <el-button type="text" @click="handleDeleteClub(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue';
import TopNavbar from '@/components/TopNavbar.vue';
import axios from 'axios';
import { ElMessageBox } from 'element-plus';

export default {
  name: 'ClubManagementPage',
  components: {
    Sidebar,
    TopNavbar,
  },
  data() {
    return {
      clubs: [],
      searchQuery: '',
    };
  },
  created() {
    this.searchAll();
  },
  computed: {
    filteredClubs() {
      return this.clubs.filter((club) =>
          club.clubName.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
  },
  methods: {
    handleSearch() {
      const category = '';
      this.searchClubs(this.searchQuery, category);
    },
    handleViewClub(club) {
      console.log(club)
      this.$router.push({ name: 'ClubDetail', query: { clubId: club.clubId } });
    },


    async searchAll(){
      try {
        const response = await axios.get('/club/management');
        if (response.data.code === 0) {
          this.clubs = response.data.data;
        } else {
          console.error('Failed to fetch search user:', response.data.message);
        }
      } catch (error) {
        console.error('Error fetching search user:', error);
      }
    },

    handleDeleteClub(club) {
      ElMessageBox.confirm('您确定要删除这个社团吗?', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            this.performDelete(club); // 直接传递 clubId 的数组
          })
          .catch(() => {
            this.$message.success('操作已取消');
          });
    },
    async performDelete(club) {
      try {
        const response = await axios.post(
            '/club/deleteClub',
            null,
            { params: { clubId: club.clubId } }
        );
        if (response.data.code === 0) {
          this.$message.success('删除成功！');
          this.clubs = this.clubs.filter(
              (item) => item.clubId !== club.clubId
          );
        } else {
          this.$message.error('删除失败');
        }
      } catch (error) {
        console.error('Error deleting club:', error);
      }
    },
    async searchClubs(keyword, category) {
      let params = {
        keyword: keyword,
        categories: category,
      };
      try {
        const response = await axios.get('/index/search', { params });
        if (response.data.code === 0) {
          this.clubs = response.data.data;
        } else {
          console.error(
              'Failed to fetch search results:',
              response.data.message
          );
        }
      } catch (error) {
        console.error('Error fetching search results:', error);
      }
    },
  },
};
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: #f4f4f5;
}

.sidebar {
  width: 250px;
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.club-management-content {
  flex-grow: 1;
  margin-left: 250px;
  padding: 20px;
  padding-top: 80px;
  overflow-y: auto;
}

.search-and-actions {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  flex-grow: 1;
  width: 250px;
}

.club-management-card {
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #fff;
}

.el-table {
  margin-top: 10px;
}

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    position: relative;
  }

  .club-management-content {
    margin-left: 0;
    padding: 10px;
  }

  .search-and-actions {
    flex-direction: column;
  }

  .search-input {
    width: 100%;
  }
}
</style>
